import { getComponentConfByType } from "@/components/QuestionComponents";
import useGetComponentInfo from "@/hooks/useGetComponentInfo";
import { ComponentInfoType } from "@/store/componentReducer";
import { cn } from "@/utils/core-uitls";
import { FC } from "react";

type PropsType = {
  selectedComponentId: string;
  setSelectedComponentId: (id: string) => void;
  setSelectedComponentType: (type: string) => void;
};

const ComponentLib: FC<PropsType> = ({
  selectedComponentId,
  setSelectedComponentId,
  setSelectedComponentType,
}) => {
  const { componentList } = useGetComponentInfo();

  function handleClick(event: React.MouseEvent, id: string, type: string) {
    event.stopPropagation();
    setSelectedComponentId(id);
    setSelectedComponentType(type);
  }

  //获取组件函数
  function getComponent(componentInfo: ComponentInfoType) {
    const { type, props } = componentInfo;
    const componentConf = getComponentConfByType(type);
    if (componentConf == null) return null;
    const { Component } = componentConf;

    return <Component {...props} />;
  }
  return (
    <div className="min-h-full bg-white opacity-60  ">
      {componentList
        .filter((c) => !c.isHidden)
        .map((c) => {
          const { fe_id, type } = c;
          //获取组件

          return (
            <div
              key={fe_id}
              className={cn(
                "m-3 border-1 border-white p-3 rounded-md  hover:border-[#d9d9d9]",
                fe_id === selectedComponentId ? "!border-[#1890ff]" : "",
                c.isLocked ? "opacity-30 cursor-not-allowed" : ""
              )}
              onClick={(event) => handleClick(event, fe_id, type)}
            >
              <div className="pointer-events-none">{getComponent(c)}</div>
            </div>
          );
        })}
      {/* <div className="m-3 border-1 border-white p-3 rounded-md  	 hover:border-[#d9d9d9]">
  <div className="pointer-events-none">

    <QuestionInput   />
  </div>
</div>
<div className="m-3 border-1 border-white p-3 rounded-md  	 hover:border-[#d9d9d9]">
  <QuestionTitle />
</div> */}
    </div>
  );
};

export default ComponentLib;
